import { PageContainer, ProTable } from "@ant-design/pro-components";
import { Button, Modal, Card, Form, Radio, Space } from "antd";
import { connect } from "umi";
import { namespace, calcColumns } from "./configFile";
import { useEffect, useRef, useState } from "react";
import styles from "./styles.less";

const Page = (props) => {
  const { dispatch, submitLoading, data } = props;
  useEffect(() => {
    dispatch({
      type: `${namespace}/pageInit`,
    });
  }, []);

  return (
    <PageContainer className={styles.contentExamDetail}>
      <Card>
        {data.map(
          (
            {
              questionStem,
              options,
              choiceOption,
              correctOption,
              resultExplain,
            },
            key
          ) => {
            let _options = options ? JSON.parse(options) : [];
            console.log(_options);
            return (
              <div className={styles.quesBox}>
                <div className={styles.left}>
                  <div className={styles.title}>
                    <div>单选题</div>
                    <div>
                      {key + 1}/{data.length}
                    </div>
                  </div>
                  <div className={styles.subTitle}>{questionStem}</div>
                  {_options.map(({ option, content, value }) => (
                    <div>
                      <Radio value={option} checked={option === choiceOption}>
                        {option}
                      </Radio>
                      {content}
                    </div>
                  ))}
                </div>
                <div className={styles.right}>
                  <div className={styles.text}>客户选择: {choiceOption}</div>
                  <div className={styles.text}>正确答案: {correctOption}</div>
                  <div className={styles.text}>解析: {resultExplain}</div>
                </div>
              </div>
            );
          }
        )}
      </Card>
    </PageContainer>
  );
};

export default connect((state) => ({
  ...state[namespace],
  submitLoading: state.loading.effects[`${namespace}/submitItem`],
}))(Page);
